<template>
  <view class="shop">
    <LocationCalendar page="shop" />
    <view class="content">
      <!-- 店铺信息 -->
      <view class="shop-info">
        <view class="info-top">
          <image src="../../static/icon/ti01.png" />
          <view class="shop-tit">
            <view class="title">
              <view class="yyz"> 营业中</view>
              <view class="shop-name"> 幸运咖啡店额额额 </view>
            </view>
            <view class="mark-num">
              <view class="mark">
                <view class="mark-tit"> 评分 </view>
                <view class="mark-value mp"> 4.8分 </view>
              </view>
              <view class="mark">
                <view class="mark-tit"> 销量 </view>
                <view class="mark-value"> 1000+ </view>
              </view>
              <view class="mark">
                <view class="mark-tit"> 店铺评价 </view>
                <view class="mark-value"> 999+ </view>
              </view>
            </view>
          </view>
        </view>
        <view class="info-intro">
          店铺简介：本店铺内容简介展示本店铺内容简介展示区域商品内本店铺内容简介展示。
        </view>
        <view class="info-location">
          <view class="distance">
            距离：<text> 1.5km </text>
          </view>
          <view class="nav-phone">
            <view class="nav">
              <image src="../../static/icon/home/nav.png" />导航
            </view>
            <view class="nav">
              <image src="../../static/icon/home/phone.png" />电话
            </view>
          </view>
        </view>
      </view>
      <!-- switch bar -->
      <view class="switch-bar">
        <view class="s-item" @tap="switchTap('1')" :class="switchValue=='1'?'a-s-item':''"> 店铺产品 </view>
        <view class="s-item" @tap="switchTap('2')" :class="switchValue=='2'?'a-s-item':''"> 商家信息 </view>
        <view class="s-item" @tap="switchTap('3')" :class="switchValue=='3'?'a-s-item':''"> 用户评价 </view>
      </view>
      <!-- 店铺产品 -->
      <view class="shop-product" v-if="switchValue == '1'">
        <scroll-view scroll-y="true" class="tab-bar" :style="{height:scrollViewHeight}">
          <view v-for="item in 3" class="tab-item" :class="item==3?' a-tab-item':''">项目{{ item }}</view>
        </scroll-view>
        <scroll-view scroll-y="true" class="sc-view-right" :style="{height:scrollViewHeight}">
          <view v-for="item in 3">
            <GoodsCard @add="selectGoods" />
          </view>
        </scroll-view>
      </view>
      <!-- 商家信息 -->
      <view class="shop-details" v-if="switchValue == '2'">
        <view class="item">
          <view class="label"> 营业时间 </view>
          <view class="value"> 09:00至18:00</view>
        </view>
        <view class="item">
          <view class="label"> 联系电话 </view>
          <view class="value"> 15236242999</view>
        </view>
        <view class="item">
          <view class="label"> 商家地址 </view>
          <view class="value"> 
            湖南省长沙市岳麓区麓谷信息港00000号
            <image src="../../static/icon/shop/nav.png"/>
          </view>
        </view>
        <view class="item">
          <view class="label"> 商家简介 </view>
          <view class="value"> 星巴克咖啡公司成立于1971年，是全球较大的咖啡连锁店，其总部坐落美国华盛顿州西雅图市。星巴克旗下零售产品包括30多款咖啡豆、手工制作的浓缩咖啡和多款咖啡冷热饮料、新鲜美味的各式糕点食品以及丰富多样的咖啡机咖啡杯等商品。星巴克在全球范围内已经有近21300间分店遍布北美、南美洲、欧洲、中东及太平洋区</view>
        </view>
      </view>
      <!-- 用户评价 -->
      <Evaluate :isTab="false" :isTitle="false"/>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom-btn">
      <view class="bot-cart">
        <view class="tips-num"> 1 </view>
        <image src="../../static/tabIcon/cart.png" />
      </view>
      <view class="bot-price-btn">
        <view class="bot-price">
          合计：<text>￥<text>29.98</text></text>
        </view>
        <view class="bot-btn"> 去结算 </view>
      </view>
    </view>
    <!-- 商品规格弹窗 -->
    <GoodsArguments ref="goodsArgumentsRef"/>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import LocationCalendar from '@/components/LocationCalendar.vue'
  import GoodsCard from '@/components/GoodsCard.vue';
  import Evaluate from '@/components/Evaluate.vue';
  import GoodsArguments from '@/components/GoodsArguments.vue';
  const { safeArea } = uni.getSystemInfoSync()
  const switchValue = ref('1')
  const goodsArgumentsRef = ref()
  const scrollViewHeight = computed(() => {
    return safeArea.height - 90 + 'px'
  })
  // 商品的宽度
  const goodsWidth = computed(() => {
    return safeArea.width - 196 + 'px'
  })
  // 点击切换商家产品/商家信息/评价
  const switchTap = (index) => {
    switchValue.value = index
  }
  // 点击商品加号 
  const selectGoods = (info) => {
    console.log(info, 'info');
    goodsArgumentsRef.value.open()
  }
</script>

<style lang="scss" scoped>
  .shop {
    width: 100%;

    .content {
      width: 100%;
      transform: translateY(-50px);
      box-sizing: border-box;

      .shop-info {
        width: 100%;
        padding: 10px 22px 0;
        box-sizing: border-box;

        .info-top {
          padding: 10px 10px 0;
          background-color: #fff;
          border-radius: 10px 10px 0 0;
          display: flex;

          image {
            width: 60px;
            height: 60px;
            margin-right: 12px;
          }

          .shop-tit {
            .title {
              display: flex;
              align-items: end;

              .yyz {
                width: 34px;
                height: 16px;
                color: #FFFFFF;
                font-size: 10px;
                text-align: center;
                line-height: 16px;
                background: #4CD995;
                border-radius: 2px;
              }

              .shop-name {
                margin-left: 3px;
                color: #333333;
                font-weight: bold;
                font-size: 16px;
              }
            }

            .mark-num {
              margin-top: 8px;
              display: flex;
              font-size: 12px;
              color: #999999;

              .mark {
                position: relative;
                padding: 0 24px;

                &:nth-of-type(1) {
                  padding-left: 0;
                }

                &::before {
                  display: block;
                  content: '';
                  position: absolute;
                  right: 0;
                  top: 50%;
                  transform: translateY(-50%);
                  width: 1px;
                  height: 14px;
                  background-color: #E6E6E6;
                }

                &:nth-last-of-type(1):before {
                  display: none;
                }

                .mark-value {
                  margin-top: 4px;
                  color: #333333;

                  .mp {
                    color: #FF3B1E !important;
                  }
                }
              }
            }
          }
        }

        .info-intro {
          font-weight: 400;
          font-size: 12px;
          color: #999999;
          line-height: 16px;
          padding: 10px;
          background-color: #fff;
          box-sizing: border-box;
          border-bottom: 1px solid #E6E6E6;
        }

        .info-location {
          display: flex;
          justify-content: space-between;
          padding: 11px;
          box-sizing: border-box;
          background-color: #fff;
          border-radius: 0 0 10px 10px;

          .distance {
            font-weight: 400;
            font-size: 12px;
            color: #AAAAAA;
            line-height: 14px;

            text {
              color: #333333;
            }
          }

          .nav-phone {
            font-weight: 400;
            font-size: 11px;
            color: #666666;
            line-height: 13px;
            display: flex;

            .nav {
              display: flex;
              align-items: center;

              image {
                width: 16px;
                height: 16px;
                margin-right: 6px;
              }

              &:nth-of-type(1) {
                margin-right: 40px;
              }
            }
          }
        }
      }

      // switch bar
      .switch-bar {
        display: flex;
        height: 40px;
        margin-top: 10px;
        background-color: #FFFFFF;
        border-bottom: 1px solid #E6E6E6;
        border-radius: 10px 10px 0px 0px;
        box-sizing: border-box;
        position: sticky;
        top: 50px;
        left: 0;
        z-index: 9;

        .s-item {
          flex: 1;
          font-size: 14px;
          color: #555555;
          line-height: 40px;
          text-align: center;

          &.a-s-item {
            position: relative;
            font-weight: 500;
            font-size: 16px;
            color: #FF3B1E;

            &::before {
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              display: block;
              content: '';
              width: 26px;
              height: 4px;
              border-radius: 33px;
              background: linear-gradient(360deg, #FF8508 0%, #FF4847 100%);
            }
          }
        }
      }

      // 店铺产品
      .shop-product {
        display: flex;

        .tab-bar {
          width: 86px;

          .tab-item {
            height: 46px;
            color: #666666;
            font-size: 14px;
            font-weight: 400;
            line-height: 46px;
            text-align: center;

            &.a-tab-item {
              background: #FFFFFF;
              font-weight: 500;
              font-size: 14px;
              color: #333333;
            }
          }
        }

        .sc-view-right {
          flex: 1;
          background-color: #ffffff;
        }
      }

      // 商家信息
      .shop-details {
        width: 100%;
        padding: 10px 23px;
        box-sizing: border-box;
        background-color: #ffffff;
        .item {
          &:nth-of-type(1) {
            .label {
              margin-top: 0;
            }
          }
          .label {
            margin: 14px 0 6px;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            line-height: 20px;
          }
          .value {
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 20px;
            image {
              width: 12px;
              height: 16px;
              margin-left: 8px;
            }
          }
        }
      }
      // 用户评价
    }

    .bottom-btn {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 50px;
      padding: 0 12px;
      box-sizing: border-box;

      .bot-cart {
        position: relative;
        width: 29px;
        height: 29px;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 29px;
          height: 29px;
        }

        .tips-num {
          position: absolute;
          right: -50%;
          top: 0;
          transform: translate(-50%, -50%);
          width: 16px;
          height: 16px;
          background: #F53F3F;
          border-radius: 50%;
          color: #ffffff;
          text-align: center;
          font-weight: 500;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 16px;
        }
      }

      .bot-price-btn {
        display: flex;
        align-items: end;

        .bot-price {
          font-weight: 400;
          font-size: 14px;
          color: #666666;

          text {
            font-weight: 700;
            font-size: 14px;
            color: #FF3B1E;

            text {
              font-weight: 700;
              font-size: 20px;
              color: #FF3B1E;
            }
          }
        }

        .bot-btn {
          width: 102px;
          height: 40px;
          color: #FFFFFF;
          font-size: 16px;
          font-weight: 400;
          text-align: center;
          line-height: 40px;
          background: #FF3B1E;
          margin-left: 10px;
          border-radius: 99px;
        }
      }
    }
  }
</style>